<template>
  <div class="table-page-search-wrapper">
    <bread-crumb />
    <a-card :bordered="false" class="m-24">
      <a-form
        class="ant-advanced-search-form"
        layout="inline">
        <a-row :gutter="48">
          <a-col :md="8" :sm="24">
            <a-form-item label="规则编号">
              <a-input v-model="queryParam.p1" placeholder="请输入"/>
            </a-form-item>
          </a-col>
          <a-col :md="8" :sm="24">
            <a-form-item label="使用状态">
              <a-select v-model="queryParam.p2" placeholder="请选择" default-value="0">
                <a-select-option value="0">全部</a-select-option>
                <a-select-option value="1">关闭</a-select-option>
                <a-select-option value="2">运行中</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <template v-if="advanced">
            <a-col :md="8" :sm="24">
              <a-form-item label="规则编号">
                <a-input v-model="queryParam.p3" placeholder="请输入"/>
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <a-form-item label="规则编号">
                <a-input v-model="queryParam.p4" placeholder="请输入"/>
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <a-form-item label="规则编号">
                <a-input v-model="queryParam.p5" placeholder="请输入"/>
              </a-form-item>
            </a-col>
          </template>
          <a-col :md="!advanced && 8 || 24" :sm="24">
            <span class="table-page-search-submitButtons" :style="advanced && { float: 'right', overflow: 'hidden' } || {} ">
              <a-button type="primary" @click="search">查询</a-button>
              <a-button style="margin-left: 8px" @click="reset">重置</a-button>
              <a @click="toggleAdvanced" style="margin-left: 8px">
                {{ advanced ? '收起' : '展开' }}
                <a-icon :type="advanced ? 'up' : 'down'"/>
              </a>
            </span>
          </a-col>
        </a-row>
      </a-form>

      <div style="margin-bottom: 24px">
        <a-button type="primary" icon="plus" @click="openModal(true)">新建</a-button>
      </div>

      <div class="scroll-table example-table">
        <a-table rowKey="id" :loading="loading" :columns="columns" :dataSource="dataSet" :pagination="pagination">
          <span slot="action" slot-scope="text,record">
            <a href="javascript:;" @click="openModal(false, record)">修改</a>
            <a-divider type="vertical" />
            <a class="text-danger" href="javascript:;" @click="deleted(record.id)">删除</a>
          </span>
        </a-table>
      </div>

    </a-card>

    <a-modal
      :title="title"
      :destroyOnClose="true"
      v-model="visible"
      @ok="handleOk"
    >
      <a-form :form="form">
        <a-form-item
          label="规则名称"
          :label-col="{ span: 7 }"
          :wrapper-col="{ span: 13 }">
          <a-input placeholder="请输入规则名称" v-decorator="['name',{rules: [{ required: true, message: '规则名称不能为空!' }]}]"/>
        </a-form-item>
        <a-form-item
          label="描述"
          :label-col="{ span: 7 }"
          :wrapper-col="{ span: 13 }">
          <a-input placeholder="请输入描述" v-decorator="['desc',{rules: [{ required: true, message: '描述不能为空!' }]}]"/>
        </a-form-item>
        <a-form-item
          label="服务器调用次数"
          :label-col="{ span: 7 }"
          :wrapper-col="{ span: 13 }">
          <a-input placeholder="请输入服务器调用次数" v-decorator="['times',{rules: [{ required: true, message: '服务器调用次数不能为空!' }]}]"/>
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script>
import moment from 'moment'
import { List } from '../../api/login'
import BreadCrumb from '@/components/tools/Breadcrumb'
import Base from '@/utils/mixin'
export default {
  components: {
    BreadCrumb
  },
  mixins: [ Base ],
  data () {
    return {
      columns: [
        { title: '规则名称', dataIndex: 'name' },
        { title: '描述', dataIndex: 'desc' },
        { title: '服务器调用次数', dataIndex: 'times', sorter: (a, b) => a.times - b.times },
        { title: '状态', dataIndex: 'status' },
        { title: '上次调用时间', dataIndex: 'lastDate', sorter: this.timeSort },
        { title: '操作', scopedSlots: { customRender: 'action' } }
      ],
      form: this.$form.createForm(this),
      visible: false,
      title: '新建',
      editId: null
    }
  },
  created: function() {
    /*
     * 当接口为 /api/devices/1?page=1&page_size=10 这类情况
     * 需要在路径中传ID
     */
    // this.queryParam.urlP1 = 12
  },
  methods: {
    /*
    *必须要创建这个函数,并调用listHandler
    */
    getList(params = {}) {
      this.listHandler(List, params)
    },
    timeSort (a, b) {
      return moment(a.lastDate).valueOf() - moment(b.lastDate).valueOf()
    },
    deleted (id) {
      this.$confirm({
        title: '删除提示',
        content: '你确认要删除该项?',
        onOk:() => {
          console.log(id)
          this.$message.success('删除成功！')
          this.getList(Object.assign(this.queryParam, { page: 1, page_size: this.pagination.pageSize  }))
        },
        onCancel() {},
      })
    },
    // 打开模态框
    openModal(boolean, row) {
      this.visible = true
      if (boolean) {
        this.title = '新建'
        this.editId = null
      } else {
        this.title = '编辑'
        this.editId = row.id
        const { name, desc, times } = row
        this.$nextTick(() => {
          this.form.setFieldsValue({ name, desc, times})
        })
      }

    },
    // 确认按钮
    handleOk() {
      this.form.validateFields((err, values) => {
        if (!err) {
          if (!this.editId) {
            console.log(values)
            // 创建逻辑
            this.visible = false
            this.$message.success('创建成功')
            this.getList(Object.assign(this.queryParam, { page: 1, page_size: this.pagination.pageSize  }))
          } else {
            this.visible = false
            this.$message.success('修改成功')
            this.getList(Object.assign(this.queryParam, { page: 1, page_size: this.pagination.pageSize  }))
          }
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  :global(.example-table .ant-table-wrapper .ant-table-body) {
    min-width: 900px;
  }
</style>
